<template>
    <view :class="$style.cells">
        <CellPicker border :columns="birthdays" v-model="formData.birthday" :default="[defaultYear, '01']" @confirm="e => doUpdate('birthday', e[0] + e[1])">
            <text>出生年月</text>
        </CellPicker>
        <CellPicker border :columns="heights" v-model="formData.height" :default="[165]" @confirm="e => doUpdate('height', e[0])">
            <text>身高</text>
        </CellPicker>
        <CellPicker border :columns="weights" v-model="formData.weight" :default="[50]" @confirm="e => doUpdate('weight', e[0])">
            <text>体重</text>
        </CellPicker>
        <Cell :class="$style.cell" arrow @tap="hometownVisible = true">
            <text>户籍地</text>
            <template #right>{{ formData.hometownStr }}</template>
        </Cell>
        <Cell :class="$style.cell" arrow @tap="residenceVisible = true">
            <text>现居地</text>
            <template #right>{{ formData.residenceStr }}</template>
        </Cell>
        <CellPicker border :columns="educationOptions" v-model="formData.education" @confirm="e => doUpdate('education', e[0])">
            <text>学历</text>
        </CellPicker>
        <Cell :class="$style.cell" arrow @tap="careerVisible = true">
            <text>职业</text>
            <template #right>
                {{ careerMap[formData.career] }}
            </template>
        </Cell>
        <CellPicker border :columns="monthIncomeOptions" v-model="formData.income" @confirm="e => doUpdate('income', e[0])">
            <text>月收入</text>
        </CellPicker>
        <CellPicker border :columns="houseStatusOptions" v-model="formData.houseStatus" @confirm="e => doUpdate('houseStatus', e[0])">
            <text>住房情况</text>
        </CellPicker>
        <CellPicker :columns="carStatusOptions" v-model="formData.carStatus" @confirm="e => doUpdate('carStatus', e[0])">
            <text>购车情况</text>
        </CellPicker>
    </view>

    <view class="p-l-r m-t-50">
        <nut-button block type="success">保存</nut-button>
    </view>


    <DistrictPicker v-model:visible="hometownVisible" v-model="formData.hometown" :max-level="4" @confirm="confirmDistrict" />
    <DistrictPicker v-model:visible="residenceVisible" v-model="formData.residence" :max-level="4" @confirm="confirmResidence" />

    <nut-popup v-model:visible="careerVisible" position="bottom" closeable>
        <view :class="$style.carerrContainer">
            <view :class="$style.title">选择职业</view>
            <nut-radio-group  v-model="formData.career" direction="horizontal" @change="selectCareer">
                <nut-radio v-for="item in careerOptions" :key="item.code" :label="item.code" shape="button">{{ item.name }}</nut-radio>
            </nut-radio-group>
        </view>
    </nut-popup>


</template>

<script lang="ts" setup>
    import Cell from '@/components/Cell.vue'
    import CellPicker from './CellPicker.vue';
    import DistrictPicker from '@/components/DistrictPicker.vue'
    import { ref } from 'vue';
    import { getCareerApi, getEducationApi, getMonthIncomeApi, getHouseStatusApi, getCarStatusApi } from '@/api/Common';
    import { getBaseInfoApi, updateBaseInfoApi } from '@/api/User';
    import { hideLoading, showLoading, navigateBack } from '@/utils/framework';

    interface Column {name:string; value:any}


    const updateData:{[key:string]:any} = {

    }

    const formData = ref({
        birthday : [],
        height : [],
        weight : [],
        hometown : [],
        hometownStr : '',
        residence : [],
        residenceStr : '',

        education : [],
        career : '',
        income : [],
        houseStatus : [],
        carStatus : []
    })

    async function doUpdate(field:string, params:any) {
        //showLoading()
        //await updateBaseInfoApi(field, params)
        //hideLoading()
        updateData[field] = params
    }

    async function submit() {
        if(Object.keys(updateData).length == 0) {
            navigateBack()
            return
        }
        showLoading()
        await updateBaseInfoApi(updateData)
        hideLoading()
        navigateBack()
    }


    const educationOptions = ref<Column[]>([])
    getEducationApi().then(data => {
        data.forEach(item => {
            educationOptions.value.push({name : item.name, value : Number(item.code)})
        })
    })

    const careerOptions = ref<any[]>([])
    const careerMap = ref<any>({})
    getCareerApi().then(data => {
        data.forEach(item => {
            item.code = Number(item.code)
            careerMap.value[item.code] = item.name
            careerOptions.value.push(item)
        })
    })


    const monthIncomeOptions = ref<any[]>([])
    getMonthIncomeApi().then(data => {
        data.forEach(item => {
            monthIncomeOptions.value.push({name : item.name, value : Number(item.code)})
        })
    })

    const houseStatusOptions = ref<Column[]>([])
    getHouseStatusApi().then(data => {
        data.forEach(item => {
            houseStatusOptions.value.push({name : item.name, value : Number(item.code)})
        })
    })

    const carStatusOptions = ref<Column[]>([])
    getCarStatusApi().then(data => {
        data.forEach(item => {
            carStatusOptions.value.push({name : item.name, value : Number(item.code)})
        })
    })
    

    const birthdays = ref<Array<Column[]>>([[], []])
    const year = (new Date()).getFullYear()
    const defaultYear = String(year - 30)

    for(let i = year - 80; i <= year; i ++) {
        birthdays.value[0].push({name : String(i) + '年', value : String(i)})
    }
    for(let i = 1; i <= 12; i ++) {
        birthdays.value[1].push({name : String(i) + '月', value : String(i).padStart(2, '0')})
    }


    const heights = ref<Column[]>([])
    for(let i = 130; i <= 195; i ++) {
        heights.value.push({name : String(i) + 'cm', value : i})
    }

    const weights = ref<Column[]>([])
    for(let i = 40; i <= 150; i ++) {
        weights.value.push({name : String(i) + 'kg', value : i})
    }


    const hometownVisible = ref(false)
    function confirmDistrict(e) {
        formData.value.hometownStr = e.address[2] + e.address[3]
        doUpdate('hometown', e.value)
    }

    const residenceVisible = ref(false)
    function confirmResidence(e) {
        formData.value.residenceStr = e.address[1] + e.address[2]
        doUpdate('residence', e.value)
    }

    const careerVisible = ref(false)
    function selectCareer() {
        careerVisible.value = false
        doUpdate('career', formData.value.career)
    }

    showLoading()
    getBaseInfoApi().then(r => {
        const data = r.data
        if(data) {
            for(let k in formData.value) {
                if(k in data) {
                    if(data[k]) {
                        if(k == 'birthday') {
                            formData.value[k] = [String(data[k]).substring(0, 4), String(data[k]).substring(4, 6)]
                        }else if(k == 'hometown' || k == 'residence' || k == 'career') {
                            formData.value[k] = data[k]
                        }else {
                            formData.value[k] = [data[k]]
                        }
                    }
                }
            }
        }

        hideLoading()
    })




</script>

<style lang="scss" module>
page{
    background-color: $page-background-color;
}
    .cells{
        padding: $space;
        .cell{
            height: 88px;
            background: #fff;
            border-radius: 10px;
            padding: 0 $space;
            border-bottom: 1px solid $page-background-color;
            &:last-of-type{
                border-bottom: none;
            }
        }
    }

    .carerrContainer{
        .title{
            font-size: 32px;
            text-align: center;
            margin-bottom: 30px;
        }
        padding: 30px $space;
    }
    
</style>